import React from 'react';
import {
    StyleSheet,
    View,
    Image,
    InteractionManager,
    Text,
    TouchableOpacity,
} from 'react-native';
import Common from '../common/constants';
import {Card, WingBlank, WhiteSpace} from 'antd-mobile';
import Header from '../components/Header';

const cardList = [
    {'id' : '0', 'name' : '2017春夏套票', 'price' : '50元', 'summary' : '春夏套票的简介春夏套票的春夏套票春夏套票春夏套票春夏套票春夏套票简介春夏套票的简介春夏套票的简介春夏套票的简介春夏套票的简介'},
    {'id' : '1', 'name' : '2017亲子套票', 'price' : '108元', 'summary' : '亲子套票的简介'},
    {'id' : '2', 'name' : '一元券', 'price' : '1元', 'summary' : '一元券的简介'},
    {'id' : '3', 'name' : '礼品卡', 'price' : '50元，100元', 'summary' : '礼品卡的简介'},
];

export default class CardList extends React.Component{

    componentDidMount() {
        InteractionManager.runAfterInteractions(() => {
            const {dispatch} = this.props;
         //   dispatch(fetchBanner());
        });
    }

    render(){
        return (
            <View style={styles.main}>
                {cardList.map((obj, i) => {
                    return (
                        <WingBlank size="lg" key={i}>
                        <WhiteSpace size="lg" />
                        <TouchableOpacity 
                            onPress={() => {
                                console.log(obj);
                                if(obj.id === '0'){
                                    console.log('adsasd');
                                }
                            }}
                        >
                        <Card >
                          <Card.Header
                            title={obj.name}
                            thumb="https://zos.alipayobjects.com/rmsportal/AiyWuByWklrrUDlFignR.png"
                            extra={obj.price}
                          />
                          <Card.Body>
                            <Text style={styles.summary}>{obj.summary}</Text>
                          </Card.Body>
                          <Card.Footer content="footer content"  />
                        </Card>
                        </TouchableOpacity>
                        <WhiteSpace size="lg" />
                        </WingBlank>
                    );
                })}
               
            </View>
        );
    }
}

const styles = StyleSheet.create({

    main : {
        marginTop : 65
    },

    bannerImage: {
        height: 200,
        width: Common.window.width,
    },

    city : {
        width : 100,
    },

    summary : {
        paddingLeft : 20,
        paddingRight : 20,
        lineHeight : 18,
    }

   
})